<template>
    <view class="gjl-components">
        <view class="inner" v-if="type == 1">
            <view class="tab-ul" :class="{'flexend':tabStyle.flexend}">
                <view class="tab-li" :class="{'active':chooseData.value == item.value}" :style="{flex:item.flex}" v-for="(item,index) in tabArr"
                    :key="index">
                    <view class="text" @click="chooseTab(item)">
                        {{item.title}}
                    </view>
                </view>
            </view>
        </view>
        <view class="inner2" v-if="type == 2">
            <view class="tab-ul" :class="{'flexend':tabStyle.flexend}">
                <view class="tab-li" :class="{'active':chooseData.value == item.value}" :style="{flex:item.flex}" v-for="(item,index) in tabArr"
                    :key="index">
                    <view class="text" @click="chooseTab(item)">
                        {{item.title}}
                    </view>
                </view>
            </view>
        </view>
        <view class="inner3" v-if="type == 3">
            <view class="tab-ul" :class="{'flexend':tabStyle.flexend}">
                <view class="tab-li" :class="{'active':chooseData.value == item.value}" :style="{flex:item.flex}" v-for="(item,index) in tabArr"
                    :key="index">
                    <view class="text" @click="chooseTab(item)">
                        {{item.title}}
                    </view>
                </view>
            </view>
        </view>
        <view class="inner4" v-if="type == 4">
            <view class="tab-ul" :class="{'flexend':tabStyle.flexend}">
                <view class="tab-li" @click="chooseTab(item)" :class="{'active':chooseData.value === item.value}" :style="{flex:item.flex}" v-for="(item,index) in tabArr"
                    :key="index">
                    <view class="text">
                        {{item.title}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            tabArr: {
                type: Array,
                default: function() {
                    return [{
                            title: '今日距离',
                            value: 1
                        },
                        {
                            title: '个人完赛率',
                            value: 2
                        },
                        {
                            title: '总距离',
                            value: 3
                        },
                        {
                            title: '点赞榜',
                            value: 4
                        }
                    ]
                }
            },
            current: {
                type: Number,
                default: 0
            },
            tabStyle: {
                type: Object,
                default: function() {
                    return {}
                }
            },
            type: {
                type: Number,
                default: 1
            }
        },
        data() {
            return {
                chooseData: {}
            }
        },
        created() {
            this.init()
        },
        methods: {
            // init
            init() {
                this.chooseData = (this.current && this.tabArr[this.current]) || this.tabArr[0]
                this.$emit('chageTab', this.chooseData)
            },
            chooseTab(item) {
                this.chooseData = item;
                this.$emit('chageTab', item)
            }
        }
    }
</script>

<style scoped lang="scss">
    .gjl-components {
        .inner4 {
            .flexend.tab-ul {
                align-items: flex-end;
            }

            .tab-ul {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .tab-li.active {
                    .text::after{
                        display: block;
                        content: '';
                        background:rgba(43,168,252,1);
                        border-radius:79rpx;
                        height: 6rpx;
                        width: 80%;
                        position: absolute;
                        bottom: 0;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                    .text {
                        font-size:32rpx;
                        font-weight:bold;
                        color:rgba(43,168,252,1);
                    }
                }

                .tab-li {
                    flex: 1 1 25%;
                    display: flex;
                    justify-content: center;
                    .text {
                        position: relative;
                        padding-bottom: 11rpx;
                        text-align: center;
                        font-size:28rpx;
                        font-weight:400;
                        color:rgba(51,51,51,1);
                    }
                }
            }
        }

        .inner3 {
            .flexend.tab-ul {
                align-items: flex-end;
            }

            .tab-ul {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .tab-li.active {
                    .text {
                        background: rgba(255, 255, 255, 1);
                        color: rgba(255, 128, 0, 1);
                    }
                }

                .tab-li {
                    margin-bottom: 20rpx;
                    flex: 1 1 20%;
                    display: flex;
                    justify-content: center;

                    .text {
                        text-align: center;
                        white-space: nowrap;
                        width: 90rpx;
                        border: 1px solid rgba(255, 255, 255, 1);
                        border-radius: 4rpx;
                        padding: 2rpx 0;
                        font-size: 32rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                    }
                }
            }
        }

        .inner2 {
            .flexend.tab-ul {
                align-items: center;
            }

            .tab-ul {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .tab-li.active {
                    .text {
                        background: rgba(255, 255, 255, 1);
                        color: rgba(255, 140, 52, 1);
                    }
                }

                .tab-li {
                    flex: 1 1 25%;
                    display: flex;
                    justify-content: center;

                    .text {
                        text-align: center;
                        white-space: nowrap;
                        width: 127rpx;
                        padding: 3rpx 0;
                        font-size: 28rpx;
                        font-weight: 400;
                        color: rgba(255, 255, 255, 1);
                        background: rgba(255, 255, 255, 0.1);
                        border-radius: 4rpx;
                    }
                }
            }

        }

        .inner {
            .flexend.tab-ul {
                align-items: flex-end;
            }

            .tab-ul {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .tab-li.active {
                    .text {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: rgba(3, 206, 139, 1);
                    }
                }

                .tab-li {
                    flex: 1 1 25%;

                    .text {
                        text-align: center;
                        font-size: 24rpx;
                        font-weight: 400;
                        color: rgba(153, 153, 153, 1);
                    }
                }
            }
        }
    }
</style>
